<template>
  <el-tooltip placement="top" v-bind="$attrs" :popperStyle="displayPopperStyle">
    <slot>
      <el-icon>
        <QuestionFilled />
      </el-icon>
    </slot>
    <template v-if="$slots.content" #content>
      <slot name="content" />
    </template>
  </el-tooltip>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { QuestionFilled } from "@element-plus/icons-vue";

export default defineComponent({
  name: "ByTooltip",
  inheritAttrs: false,
  components: {
    QuestionFilled,
  },
  props: {
    width: Number,
    popperStyle: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const displayPopperStyle = computed(() => {
      const { width, popperStyle } = props;
      return {
        width: width ? `${width}px` : "auto",
        ...popperStyle,
      };
    });

    return {
      displayPopperStyle,
    };
  },
});
</script>

<style lang="scss"></style>
